<template>
	<view :style="{ 'background-image': `linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 40%),url(${store.mer_banner})` }" class="store-home">
		<view :style="{ height: `${systemInfo.statusBarHeight}px` }"></view>
		<view class="search">
			<navigator :url="'/pages/list/index?mer_id=' + id" hover-class="none">
				<u-search height="60" :action-text="fales" :placeholder="i18n.Search" @change="search"></u-search>
			</navigator>
		</view>
		<view id="store" class="store">
			<image style="background-color: #FFFFFF;" :src="store.mer_avatar"></image>
			<view class="text">
				<text class="name">{{ store.mer_name }}</text>
				<u-icon style="padding-left: 10rpx; color: #FFFFFF;" name="arrow-right"></u-icon>
				<view class="score">
					<u-rate :disabled="true" size="24" :count="count" v-model="store.product_score"></u-rate>
					<span style="padding-left: 10rpx; font-size: 26rpx;">{{ store.product_score }}</span>
				</view>
			</view>
		</view>
		<view class="category">
			<view class="section">
				<view class="head" @click="goCategoryGoods('')">
					<view class="title">{{ i18n.All }}</view>
					<view class="iconfont iconxianxingxiangyou"></view>
				</view>
			</view>
			<view v-for="item in category" :key="item.store_category_id" class="section">
				<view class="head" @click="goCategoryGoods(item.store_category_id)">
					<view class="title">{{ item.cate_name }}</view>
					<view class="iconfont iconxianxingxiangyou"></view>
				</view>
				<view v-if="item.children" class="body">
					<view v-for="value in item.children" :key="value.store_category_id" class="item" @click="goCategoryGoods(value.store_category_id)">{{ value.cate_name }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const globalData = getApp().globalData;
import { getStoreDetail } from '@/api/store.js';
import { getStoreCategory } from '@/api/store.js';
export default {
	data() {
		return {
			systemInfo: uni.getSystemInfoSync(),
			store: {}, // 商铺详情
			id: globalData.mer_id, // 商铺id
			category: [], // 商铺分类
			count: 5
		};
	},
	computed: {
		i18n() {
			return globalData.$t('goods_cate');
		},
	},
	methods: {
		// 去分类商品页
		goCategoryGoods: function(id) {
			uni.navigateTo({
				url: `/pages/list/index?id=${id}&mer_id=${this.id}`
			});
		},
		// 获取商铺分类
		getCategory: function() {
			if (this.category.length) {
				return;
			}
			this.categoryLoading = true;
			getStoreCategory(this.id).then(res => {
				this.categoryLoading = false;
				this.category = res.data;
			});
		},
		// 获取商铺详情
		getStore: function() {
			getStoreDetail(this.id)
				.then(res => {
					this.store = res.data;
				})
				.catch(res => {
					return that.$util.Tips({
						title: res.message
					});
				});
		}
	},
	onShow() {
		this.getStore();
		this.getCategory();
	}
};
</script>

<style lang="scss">
.store-home {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	background: left top/750rpx 360rpx no-repeat fixed;
	overflow: hidden;
	.search {
		margin: 12rpx 120rpx 0 20rpx;
	}
	.store {
		position: relative;
		z-index: 6;
		display: flex;
		align-items: center;
		padding-right: 20rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 22rpx;
		image {
			width: 74rpx;
			height: 74rpx;
			border-radius: 6rpx;
			margin-right: 20rpx;
		}
		.text {
			flex: 1;
			min-width: 0;
			margin-right: 20rpx;
			.name {
				flex: 1;
				min-width: 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: bold;
				font-size: 32rpx;
				line-height: 1;
				color: #ffffff;
			}
			.score {
				display: flex;
				align-items: center;
				margin-top: 17rpx;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 1;
				color: #ffffff;
			}
		}
	}
	.category {
		padding-top: 40rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;

		.section {
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			background-color: #ffffff;

			.head {
				position: relative;
				display: flex;
				align-items: center;
				height: 90rpx;
				padding-right: 20rpx;
				padding-left: 36rpx;
				font-weight: bold;
				color: #282828;

				&::before {
					content: ' ';
					position: absolute;
					top: 50%;
					left: 20rpx;
					width: 6rpx;
					height: 24rpx;
					background-color: #e93323;
					transform: translateY(-50%);
				}

				.title {
					flex: 1;
					min-width: 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 30rpx;
				}

				.iconfont {
					font-size: 22rpx;
					line-height: 1;
				}
			}

			.body {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
				padding: 9rpx 36rpx 14rpx;

				.item {
					width: 314rpx;
					height: 84rpx;
					padding-right: 30rpx;
					padding-left: 30rpx;
					border-radius: 10rpx;
					background-color: #f5f5f5;
					margin-bottom: 10rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					font-size: 26rpx;
					line-height: 84rpx;
					color: #282828;
				}
			}
		}
	}
}
</style>
